<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				border: 1px solid red;
			}

			#div1 {
				width: 200px;
				height: 200px;
			}

			#div2 {
				width: 100px;
				height: 100px;
			}

			#div3 {
				border: 1px solid blue;
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>

		<div id="div1">
			<div id="div2">
				div2
			</div>
			div1
		</div>
		<!-- <a href="" id="remove">删除子节点</a> -->

		<!-- 	
			超链接的两个功能
				1.可以被点击，有样式
				2.点击后跳转到href 指定的url
			需求：
				保留1功能 去掉2功能
			s实现
				JavaScript:void(0) 
		-->

		<a href="javaScript:void(0)" id="remove">删除子节点</a>
		<a href="javaScript:void(0)" id="add">添加子节点</a>

		<input id="btn" type="button" value="删除子节点">
		<script>
			var a = document.getElementById('remove');
			a.onclick = function() {
				var div1 = document.getElementById('div1');
				var div2 = document.getElementById('div2');
				div1.removeChild(div2);
			}

			var btn = document.getElementById('btn');
			btn.onclick = function() {
				var div1 = document.getElementById('div1');
				var div2 = document.getElementById('div2');
				div1.removeChild(div2);
			}

			var add = document.getElementById("add");
			add.onclick = function() {
				var div1 = document.getElementById("div1");
				div3 = document.createElement("div");
				div3.setAttribute("id", "div3");
				div3.innerHTML = "div3";
				div1.appendChild(div3);
			}


			// 获取父节点
			var div2 = document.getElementById("div2");
			var div1 = div2.parentNode;
			alert(div1);
			div1.innerHTML = "我是div2的父节点div1";
		</script>

	</body>
</html>
